<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Deals - Premium Multipurpose HTML5/CSS3 Theme</title>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <!-- FAVICONS -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{icons/apple-touch-icon-144-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" th:href="@{icons/apple-touch-icon-114-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{icons/apple-touch-icon-72-precomposed.png}"/>
    <link rel="apple-touch-icon-precomposed" th:href="@{icons/apple-touch-icon-57-precomposed.png}"/>
    <link rel="shortcut icon" th:href="@{icons/favicon.png}"/>

    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" th:href="@{css/font-awesome.min.css}">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}"/>

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" th:href="@{css/slick-1.6.0/slick.css}"/>

    <link rel="stylesheet" th:href="@{css/jquery.fancybox.css}"/>
    <link rel="stylesheet" th:href="@{css/yith-woocommerce-compare/colorbox.css}"/>
    <link rel="stylesheet" th:href="@{css/owl-carousel/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{css/owl-carousel/owl.theme.default.min.css}"/>
    <link rel="stylesheet" th:href="@{css/js_composer/js_composer.min.css}"/>
    <link rel="stylesheet" th:href="@{css/woocommerce/woocommerce.css}"/>
    <link rel="stylesheet" th:href="@{css/yith-woocommerce-wishlist/style.css}"/>

    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{css/custom.css}"/>
    <link rel="stylesheet" th:href="@{css/app-orange.css}" id="theme_color"/>
    <link rel="stylesheet" href="" id="rtl"/>
    <link rel="stylesheet" th:href="@{css/app-responsive.css}"/>
</head>

<body class="page has-right-sidebar has-right-product-sidebar">
<div class="body-wrapper theme-clearfix">
    <header id="header" class="header header-style1">

        <div class="widget pull-left" style="margin-left: 300px">
            <div class="widget-inner">
                <div id="lang_sel">
                    <ul class="nav">
                        <li>
                            <a class="lang_sel_sel">
                                <img class="iclflag" title="English" alt="en" th:src="@{images/icons/en.png}" width="18"
                                     height="12"/> English
                            </a>
                            <ul>
                                <li>
                                    <a th:href="@{/deals(l='en_US')}">
                                        <img class="iclflag" title="English" alt="en" th:src="@{images/icons/en.png}"
                                             width="18" height="12"/> English
                                    </a>
                                </li>

                                <li>
                                    <a th:href="@{/deals(l='zh_CN')}">
                                        <img class="iclflag" title="中文" alt="ar" th:src="@{images/icons/ar.png}"
                                             width="18" height="12"/> 中文
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div th:replace="commons/bar::#top"></div>

        <div th:replace="commons/bar::#mid"></div>

        <div th:replace="commons/bar::#bottom"></div>
    </header>

    <div class="listings-title">
        <div class="container">
            <div class="wrap-title">
                <h1 th:text="#{deals}">Deals</h1>

                <div class="bread">
                    <div class="breadcrumbs theme-clearfix">
                        <div class="container">
                            <ul class="breadcrumb">
                                <li>
                                    <a th:href="@{/index}" th:text="#{home}">Home</a>
                                    <span class="go-page"></span>
                                </li>

                                <li class="active">
                                    <span th:text="#{deals}">Deals</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="contents" role="main" class="main-page col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="post-6 page type-page status-publish hentry">
                    <div class="entry-content">
                        <div class="entry-summary">
                            <div id="sw_deal_01" class="sw-hotdeal ">
                                <div class="sw-hotdeal-content">
                                    <!--折扣商品-->
                                    <div id="test1"></div>

                                    <div class="item-product col-lg-3 col-md-3 col-sm-4 col-xs-6"
                                         th:each="deal:${deals}">
                                        <div th:replace="commons/product::#frag(detail=${deal})"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" th:value="${session.dealcount}" id="pageCount"></input>
</div>

<!-- DIALOGS -->

<div th:replace="commons/bar::#login_form"></div>

<a id="etrostore-totop" href="#"></a>

<script type="text/javascript" th:src="@{js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery/jquery-migrate.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery/js.cookie.min.js}"></script>

<!-- OPEN LIBS JS -->
<script type="text/javascript" th:src="@{js/owl-carousel/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{js/slick-1.6.0/slick.min.js}"></script>

<script type="text/javascript" th:src="@{js/yith-woocommerce-compare/jquery.colorbox-min.js}"></script>
<script type="text/javascript" th:src="@{js/isotope/isotope.js}"></script>
<script type="text/javascript" th:src="@{js/fancybox/jquery.fancybox.pack.js}"></script>
<script type="text/javascript" th:src="@{js/sw_woocommerce/category-ajax.js}"></script>
<script type="text/javascript" th:src="@{js/sw_woocommerce/jquery.countdown.min.js}"></script>
<script type="text/javascript" th:src="@{js/js_composer/js_composer_front.min.js}"></script>

<script type="text/javascript" th:src="@{js/plugins.js}"></script>
<script type="text/javascript" th:src="@{js/megamenu.min.js}"></script>
<script type="text/javascript" th:src="@{js/main.min.js}"></script>

<script th:src="@{/js/layui.js}"></script>
<script type="text/javascript">
    var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $("#header .header-bottom").addClass("sticky-menu");
            $("#header .header-bottom").css({"top": 0, "left": 0, "right": 0});
        } else {
            $("#header .header-bottom").removeClass("sticky-menu");
        }
    };
    sticky_navigation();
    $(window).scroll(function () {
        sticky_navigation();
    });

    $(document).ready(function () {
        $(".show-dropdown").each(function () {
            $(this).on("click", function () {
                $(this).toggleClass("show");
                var $element = $(this).parent().find("> ul");
                $element.toggle(300);
            });
        });


    });

    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;

        var pages = $("#pageCount").val()

        //执行一个laypage实例
        //只显示上一页、下一页
        laypage.render({
            elem: 'test1'
            , count: pages
            , first: false
            , last: false
            , layout: ['count', 'prev', 'page', 'next', 'limit']
            , limit: 20
            , limits: [10, 20]
            , curr: location.hash.replace('#!fenye=', '') //获取起始页
            , hash: 'fenye' //自定义hash值
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if (!first) {
                    window.location.href = "deals?page=" + (parseInt(obj.curr)) + "&limit=" + obj.limit + '#!fenye=' + (parseInt(obj.curr))
                    //do something
                }
            }
        });
    });
</script>

</body>
</html>